<template>
    <footer>
        <div class="container">
            <br>
            <el-row>
                <el-col :span="6">
                    <div class="footer-bar">
                        <a href="#" class="head-brand" style="font-size: 17pt">牛牛编程</a>
                    </div>
                </el-col>
                <el-col :span="12">
                    <ul class="main-nav">
                        <li v-for="(m,index) in friendsLinks" :key="index"><a href="#"><i :class="m.icon"></i>{{m.name}}</a>
                            <ul class="drop">
                                <li v-for="(sub,index2) in m.subMenus"><a :href="sub.link" target="_blank">{{sub.name}}</a></li>
                            </ul>
                        </li>
                   </ul>
                </el-col>
                <el-col :span="6">
                    <div style="cursor: pointer">
                        <img class="me" src="../../assets/images/index/me.png" alt="">
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-divider content-position="center">京东云</el-divider>
                </el-col>
                <el-col :span="24">
                    <div class="footer-copyright">
                    <p class="text-center" style="color:#999;">Copyright <span>&copy;</span> 2017-2021 www.simoniu.com
                        All Rights Reserved.
                        <a href="http://beian.miit.gov.cn/">陕ICP备17021699号-1</a>&nbsp;&nbsp; <a
                                href="http://www.simoniu.com/admin">[后台管理]</a></p>
                    </div>
                </el-col>

            </el-row>
        </div>
    </footer>
</template>

<script>
    //引入ElementUI的类库
    /*
    import Vue from 'vue';
    //引入所需的组件
    import {Row, Col,Divider} from 'element-ui';
    //引入组件的样式表
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Divider);
    */
    import request from "@/util/request";
    export default {
        name: "MyFooter",
        data(){
            return{
                //friendsLinks: this.$store.state.webSiteData.friendsLinks
                friendsLinks: []
            }
        },
        mounted() {
            if(this.$store.state.webSiteData){
                //console.log('网站资料已经初始化....');
                //console.log(this.$store.state.webSiteData);
                this.friendsLinks = this.$store.state.webSiteData.friendsLinks;
            }else{
                //console.log('网站资料未始化....');
                this.initWebSiteInfo();
            }
        },
        methods:{
            initWebSiteInfo() {
                console.log('执行initWebSiteInfo()....');
                request.get('/blog/site/info').then(resp => {
                    if (resp.data.code === 200) {
                        this.$store.dispatch('actionSetWebSiteData', resp.data.data);
                        this.friendsLinks = this.$store.state.webSiteData.friendsLinks;
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>

    .container{
        width: 80%;
        height: 180px;
        margin: 0px auto;

    }
    .footer-bar{
        text-align: center;
        line-height: 240px;
    }
    .footer-bar a{
        text-decoration: none;
        color: #336699;
        font-weight: bold;

    }
    .footer-copyright{
        text-align: center;
    }

    .main-nav{
        display: flex;
    }

    .main-nav li{
        list-style: none;
        width: 33%;
    }

    .main-nav li a{
        text-decoration: none;
        color: #666;
    }

    .main-nav li a:hover{
        text-decoration: none;
        color: #336699;
    }

    .drop{
        margin-top: 20px;
        margin-left: 0px;
    }

    .drop li{
        width: 100%;
        text-decoration: none;
        color: #336699;
        font-size: small;
        padding: 5px;

    }


    .footer-copyright p{
        color: #ccc;
        font-size: small;
    }

    .footer-copyright a{
        color: #ccc;
        text-decoration: none;
    }
</style>
